<script setup lang='ts'>
  import { reactive, ref } from 'vue';
  import { guild_roomApi } from '@/api/controller';
  import { ToastSuccess, ToastWarning, Toastloading } from '@/utils/public';
  import { ElMessageBox } from 'element-plus';
  import roomForm from '@/views/guild_room/room/roomList/components/roomForm.vue';
  import partitioning from '@/views/guild_room/room/roomList/components/partitioning.vue';
  const roomFormRef = ref(),
  partitioningRef = ref()
  const action = reactive({
    dialogFormVisible:false,
    id:0,
    user_id:0,
    list:[],
    roomTypeOptions:[] as Array<any>
  })
  const roomTypes = async()=>{
    const res = await guild_roomApi.getRoomType({ type: 1 })
    const { data=[] } = res
    action.roomTypeOptions = data
  }
  const handleAddRoom = ()=>{
    roomFormRef.value.openDialog({
      user_id:action.user_id,
      formType:'unionAddRoom'
    })
  }
  const filtersRoomType = (type:any=0)=> {
    return action.roomTypeOptions.find(res=> res.type_id == type)?.type_name || ''
  }
  const handleAdd = (row:any = {})=>{
    ElMessageBox.confirm("是否将该房间编入公会?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(async () => {
      const loading = Toastloading();
      const { id=0, room_id=0 } = row
      guild_roomApi.roomJoinUnion({
        id,
        room_id
      }).then(()=>{
        ToastSuccess("操作成功!");
        loading.close();
        getList();
      }).catch(()=>{
        loading.close();
      })
    }).catch(() => {});
  }
  const getList = async()=>{
    const loading = Toastloading()
    const res = await guild_roomApi.getUnionRoomList({
      id:action.id
    })
    const { data=[] } = res
    action.list = data
    loading.close()
  }
  const openDialog = async(query:any = {})=> {
    const { id=0, un_user_id=0 } = query
    if(!id) return ToastWarning('id not defing')
    action.id = id
    action.user_id = un_user_id
    await roomTypes()
    await getList()
    action.dialogFormVisible = true
  }
  defineExpose({
    openDialog
  })
</script>

<template>
  <div>
    <el-dialog
    top="5vh"
    class="xm-dialog xm-dialog-cont-y"
    v-model="action.dialogFormVisible"
    width="60%"
    title="公会房间">
      <el-button class="xm-mb10 xm-mrAuto" type="primary" @click="handleAddRoom">新增房间</el-button>
      <el-table
        class="xm-main xm-TableCenter"
        :data="action.list"
        border
      >
        <el-table-column prop="name" label="公会名" />
        <el-table-column prop="room_type" label="房间认证类型">
          <template #default="scope">
            {{ filtersRoomType(scope.row.room_type)}}
          </template>
        </el-table-column>
        <el-table-column prop="room_name" label="房间名" />
        <el-table-column prop="room_uid" label="房间UID" />
        <el-table-column prop="room_id" label="房间ID" />
        <el-table-column prop="room_uid" label="房间类型">
          <template #default="scope">
            <el-tag class="info">{{ ["小屋", "CBD"][scope.row.business_type]}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column width="150" label="编入公会">
          <template #default="scope">
            <el-tag v-if="scope.row.room_join_id" class="info">公会房间</el-tag>
            <el-button v-if="!scope.row.room_join_id && scope.row.business_type == 1" type="primary" @click="handleAdd(scope.row)">编入公会</el-button>
          </template>
        </el-table-column>
        <el-table-column width="150" prop="room_uid" label="分成用户">
          <template #default="scope">
            <el-button v-rule="'getRoomFinanceUser'" type="primary" @click="partitioningRef.openDialog(scope.row)">指定分成ID</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <roomForm ref="roomFormRef" @update-list="getList" />
    <partitioning ref="partitioningRef" />
  </div>
</template>